<template>
	<view class="login-wrapper" :style="colorStyle">
		<view class="shading">
			<image :src="logoUrl" />
		</view>

		<!-- <button v-if="bindPhone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>

		<button v-else-if="!bindPhone" @click="getAuthLogin">登录</button> -->


		<view class="whiteBg" v-if="formItem === 1">
			<view class="list" v-if="current !== 1">
				<form @submit.prevent="submit">
					<view class="item">
						<view class="acea-row row-middle">
							<image src="/static/users/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
							<input type="text" :placeholder="$t(`输入手机号码`)" v-model="account" maxlength="11" required />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<image src="/static/users/code_1.png" style="width: 28rpx; height: 32rpx"></image>
							<input 
								:type="showPassword ? 'text' : 'password'" 
								:placeholder="$t(`填写登录密码`)" 
								v-model="password" 
								required 
							/>
							<text class="password-eye" @tap="togglePasswordVisibility">
								{{ showPassword ? '👁️' : '👁️‍🗨️' }}
							</text>
						</view>
					</view>
				</form>
				<!-- <navigator class="forgetPwd" hover-class="none" url="/pages/users/retrievePassword/index">
					<span class="iconfont icon-wenti"></span>忘记密码
				</navigator> -->
			</view>
			<view class="list" v-if="current !== 0 || appLoginStatus || appleLoginStatus">
				<view class="item">
					<view class="acea-row row-middle">
						<image src="/static/users/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
						<input type="text" :placeholder="$t(`输入手机号码`)" v-model="account" :maxlength="11" />
					</view>
				</view>
				<view class="item">
					<view class="acea-row row-middle">
						<image src="/static/users/code_2.png" style="width: 28rpx; height: 34rpx"></image>
						<input type="text" :placeholder="$t(`填写验证码`)" :maxlength="6" class="codeIput" v-model="captcha" />
						<view class="code-area">
						<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
							{{ text }}
						</button>
						</view>
					</view>
				</view>
				<!-- 	<view class="item" v-if="isShowCode">
					<view class="acea-row row-middle">
						<image src="/static/users/code_2.png" style="width: 28rpx; height: 32rpx;"></image>
						<input type="text" :placeholder="$t(`填写验证码`)" class="codeIput" v-model="codeVal" />
						<view class="code" @click="again"><img :src="codeUrl" /></view>
					</view>
				</view> -->
			</view>
			<view class="logon" @click="loginMobile" v-if="current !== 0">{{ $t(`登录`) }}</view>
			<view class="logon" @click="submit" v-if="current === 0">{{ $t(`登录`) }}</view>
			<!-- #ifndef APP-PLUS -->
			<view class="tips">
				<view v-if="current == 0" @click="current = 1">{{ $t(`快速登录`) }}</view>
				<view v-if="current == 1" @click="current = 0">{{ $t(`账号登录`) }}</view>
				<!-- <button v-if="bindPhone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
				<button v-else-if="!bindPhone" @click="getAuthLogin">登录</button> -->
				<button v-if="bindPhone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
				<view v-else-if="!bindPhone" @click="getAuthLogin">微信登录</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="appLogin" v-if="!appLoginStatus && !appleLoginStatus">
				<view class="hds">
					<span class="line"></span>
					<p>{{ $t(`其他方式登录`) }}</p>
					<span class="line"></span>
				</view>
				<view class="btn-wrapper">
					<view class="btn wx" @click="wxLogin">
						<span class="iconfont icon-s-weixindenglu1"></span>
					</view>
					<view class="btn mima" v-if="current == 1" @click="current = 0">
						<span class="iconfont icon-s-mimadenglu1"></span>
					</view>
					<view class="btn yanzheng" v-if="current == 0" @click="current = 1">
						<span class="iconfont icon-s-yanzhengmadenglu1"></span>
					</view>
					<view class="apple-btn" @click="appleLogin" v-if="appleShow">
						<view class="iconfont icon-s-pingguo"></view>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<view class="protocol">
				<checkbox-group @change="ChangeIsDefault">
					<checkbox :class="inAnimation ? 'trembling' : ''" @animationend="inAnimation = false" :checked="protocol ? true : false" />
					{{ $t(`已阅读并同意`) }}
					<text class="main-color" @click="showAgreement('user')">{{ $t(`《用户协议》`) }}</text>
					{{ $t(`与`) }}
					<text class="main-color" @click="showAgreement('privacy')">{{ $t(`《隐私协议》`) }}</text>
				</checkbox-group>
			</view>
		</view>
		<Verify @success="success" :captchaType="captchaType" :imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>

		<!-- 协议弹窗 -->
		<view class="agreement-popup" v-if="showAgreementPopup" @click.stop="closeAgreement">
			<view class="agreement-content" @click.stop>
				<view class="agreement-header">
					<text class="title">{{agreementTitle}}</text>
					<text class="close" @click="closeAgreement">×</text>
				</view>
				<scroll-view class="agreement-body" scroll-y>
					<rich-text :nodes="agreementContent"></rich-text>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
import dayjs from '@/plugin/dayjs/dayjs.min.js';
import sendVerifyCode from '@/mixins/SendVerifyCode';
import { loginH5, loginMobile, registerVerify, register, getCodeApi, getUserInfo, appleLogin } from '@/api/user';
import attrs, { required, alpha_num, chs_phone } from '@/utils/validate';
import { getLogo } from '@/api/public';
// import cookie from "@/utils/store/cookie";
import { VUE_APP_API_URL } from '@/utils';
// #ifdef APP-PLUS
import { wechatAppAuth } from '@/api/api.js';
// #endif
const BACK_URL = 'login_back_url';
import colors from '@/mixins/color.js';
import Verify from '../components/verify/index.vue';

import { authLogin,routineBindingPhone,authType } from '@/api/public';
import Routine from "@/libs/routine";


export default {
	name: 'Login',
	components: {
		Verify
	},
	mixins: [sendVerifyCode, colors],
	data: function () {
		return {
			authKey:'',
			copyRight: '',
			inAnimation: false,
			protocol: false,
			navList: [this.$t(`快速登录`), this.$t(`账号登录`)],
			current: 1,
			account: '',
			password: '',
			captcha: '',
			formItem: 1,
			type: 'login',
			logoUrl: '',
			keyCode: '',
			codeUrl: '',
			codeVal: '',
			isShowCode: false,
			appLoginStatus: false, // 微信登录强制绑定手机号码状态
			appUserInfo: null, // 微信登录保存的用户信息
			appleLoginStatus: false, // 苹果登录强制绑定手机号码状态
			appleUserInfo: null,
			appleShow: false, // 苹果登录版本必须要求ios13以上的
			keyLock: true,
			showAgreementPopup: false,
			agreementTitle: '',
			agreementContent: '',
			showPassword: false, // 默认密码是隐藏的
			bindPhone:false,
		};
	},
	watch: {
		formItem: function (nval, oVal) {
			if (nval == 1) {
				this.type = 'login';
			} else {
				this.type = 'register';
			}
		}
	},
	onLoad(e) {
		this.userLogin()
		let self = this;
		uni.getSystemInfo({
			success: (res) => {
				if (res.platform.toLowerCase() == 'ios' && this.getSystem(res.system)) {
					self.appleShow = true;
				}
			}
		});
		if (uni.getStorageSync('copyRight').copyrightContext) {
			this.copyRight = uni.getStorageSync('copyRight').copyrightContext;
		}
	},
	mounted() {
		// this.getCode();
		this.getLogoImage();
	},
	methods: {
		getAuthLogin(){
			authLogin({
					key: this.authKey
				}).then(res => {
					console.log('登录返回值:', res);
					uni.setStorageSync('token', res.data.token);
					let time = res.data.expires_time - this.$Cache.time();
					this.$store.commit('LOGIN', {
						token: res.data.token,
						time: time
					});
					// 登录成功后跳转首页
					uni.reLaunch({
						url: '/pages/AI_try_on/home_page'
					});
					// 保留原有获取用户信息逻辑
					this.getUserInfo(res.data.bindName)
				})
		},
		getUserInfo(new_user, back_url) {
				let that = this;
				getUserInfo().then(res => {
					uni.hideLoading();
					console.log('登录返回值2:', res);
					uni.setStorageSync('uid', res.data.uid);
					that.userInfo = res.data;
					that.$store.commit('SETUID', res.data.uid);
					that.$store.commit('UPDATE_USERINFO', res.data);
					if (new_user) {
						this.isShow = true
					} else {
						// #ifdef MP
						that.$util.Tips({
							title: that.$t(`登录成功`),
							icon: 'success'
						}, {
							tab: 3
						});
						// #endif
						// #ifndef MP
						that.$util.Tips({
							title: that.$t(`登录成功`),
							icon: 'success'
						}, {
							tab: 4,
							url: back_url || '/pages/AI_try_on/home_page'
						});
						// #endif
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err.msg,
						icon: 'none',
						duration: 2000
					});
				});
			},
		userLogin(){
			Routine.getCode()
				.then(code => { 
					authType({
							code,
							spread_spid: 0,
							spread_code: 0
						}).then(res => { 
							this.authKey = res.data.key; 
							this.bindPhone = res.data.bindPhone
						})
						.catch(err => {
							uni.hideLoading();
							uni.showToast({
								title: err,
								icon: 'none',
								duration: 2000
							});
						});
				})
				.catch(err => {
					console.log(err)
				});
			},
			getPhoneNumber(e){
				Routine.getCode().then(code=>{
					this.getUserPhoneNumber(e.detail.encryptedData,e.detail.iv,code)
				})
			},
			getUserPhoneNumber(encryptedData,iv,code){
			routineBindingPhone({
				encryptedData,
				iv,
				code,
				spread_spid:0,
				spread_code:0,
				key:this.authKey
			}).then(res=>{
				let time = res.data.expires_time - this.$Cache.time();
				this.$store.commit('LOGIN', {
					token: res.data.token,
					time: time
				}); 
				this.getUserInfo(res.data.bindName)
			})
			},
		ChangeIsDefault(e) {
			this.$set(this, 'protocol', !this.protocol);
		},
		privacy(type) {
			uni.navigateTo({
				url: '/pages/users/privacy/index?type=' + type
			});
		},
		// IOS 版本号判断
		getSystem(system) {
			let str;
			system.toLowerCase().indexOf('ios') === -1 ? (str = system) : (str = system.split(' ')[1]);
			if (str.indexOf('.')) return str.split('.')[0] >= 13;
			return str >= 13;
		},
		// 苹果登录
		appleLogin() {
			let self = this;
			this.account = '';
			this.captcha = '';
			if (!self.protocol) {
				this.inAnimation = true;
				return self.$util.Tips({
					title: '请先阅读并同意协议'
				});
			}
			uni.showLoading({
				title: this.$t(`登录中`)
			});
			uni.login({
				provider: 'apple',
				timeout: 10000,
				success(loginRes) {
					uni.getUserInfo({
						provider: 'apple',
						success: function (infoRes) {
							self.appleUserInfo = infoRes.userInfo;
							self.appleLoginApi();
						},
						fail() {
							uni.showToast({
								title: self.$t(`获取用户信息失败`),
								icon: 'none',
								duration: 2000
							});
						},
						complete() {
							uni.hideLoading();
						}
					});
				},
				fail(error) {
					console.log(error);
				}
			});
		},
		// 苹果登录Api
		appleLoginApi() {
			let self = this;
			appleLogin({
				openId: self.appleUserInfo.openId,
				email: self.appleUserInfo.email || '',
				phone: this.account,
				captcha: this.captcha
			})
				.then(({ data }) => {
					if (data.isbind) {
						uni.showModal({
							title: self.$t(`提示`),
							content: self.$t(`请绑定手机号后，继续操作`),
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									self.current = 1;
									self.appleLoginStatus = true;
								}
							}
						});
					} else {
						self.$store.commit('LOGIN', {
							token: data.token,
							time: data.expires_time - self.$Cache.time()
						});
						console.log('登录成功，token:', data.token);
						uni.setStorageSync('token', data.token);
						let backUrl = '/pages/AI_try_on/home_page';
						self.$Cache.clear(BACK_URL);
						self.$store.commit('SETUID', data.userInfo.uid);
						
						// 登录成功后打印用户信息
						console.log('===== 登录成功，用户信息 =====');
						console.log('uid:', data.userInfo.uid);
						console.log('nickname:', data.userInfo.nickname);
						console.log('phone:', data.userInfo.phone);
						// 保存用户信息到本地存储，确保其他页面可以获取
						uni.setStorageSync('uid', data.userInfo.uid);
						uni.setStorageSync('nickname', data.userInfo.nickname);
						uni.setStorageSync('phone', data.userInfo.phone);
						
						uni.reLaunch({
							url: backUrl
						});
					}
				})
				.catch((error) => {
					uni.showModal({
						title: self.$t(`提示`),
						content: self.$t(`错误信息`) + `${error}`,
						success: function (res) {
							if (res.confirm) {
								console.log(self.$t(`用户点击确定`));
							} else if (res.cancel) {
								console.log(self.$t(`用户点击取消`));
							}
						}
					});
				});
		},
		// App微信登录
		wxLogin() {
			let self = this;
			this.account = '';
			this.captcha = '';
			if (!self.protocol) {
				this.inAnimation = true;
				return self.$util.Tips({
					title: '请先阅读并同意协议'
				});
			}
			uni.showLoading({
				title: self.$t(`登录中`)
			});
			uni.login({
				provider: 'weixin',
				success: function (loginRes) {
					// 获取用户信息
					uni.getUserInfo({
						provider: 'weixin',
						success: function (infoRes) {
							self.appUserInfo = infoRes.userInfo;
							self.wxLoginApi();
						},
						fail() {
							uni.showToast({
								title: self.$t(`获取用户信息失败`),
								icon: 'none',
								duration: 2000
							});
						},
						complete() {
							uni.hideLoading();
						}
					});
				},
				fail() {
					uni.showToast({
						title: self.$t(`登录失败`),
						icon: 'none',
						duration: 2000
					});
				}
			});
		},

		wxLoginApi() {
			let self = this;
			wechatAppAuth({
				userInfo: self.appUserInfo,
				phone: this.account,
				code: this.captcha
			})
				.then(({ data }) => {
					if (data.isbind) {
						uni.showModal({
							title: self.$t(`提示`),
							content: self.$t(`请绑定手机号后，继续操作`),
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									self.current = 1;
									self.appLoginStatus = true;
								}
							}
						});
					} else {
						self.$store.commit('LOGIN', {
							token: data.token,
							time: data.expires_time - self.$Cache.time()
						});
						console.log('登录成功，token:', data.token);
						uni.setStorageSync('token', data.token);
						let backUrl = '/pages/AI_try_on/home_page';
						self.$Cache.clear(BACK_URL);
						self.$store.commit('SETUID', data.userInfo.uid);
						
						// 登录成功后打印用户信息
						console.log('===== 登录成功，用户信息 =====');
						console.log('uid:', data.userInfo.uid);
						console.log('nickname:', data.userInfo.nickname);
						console.log('phone:', data.userInfo.phone);
						// 保存用户信息到本地存储，确保其他页面可以获取
						uni.setStorageSync('uid', data.userInfo.uid);
						uni.setStorageSync('nickname', data.userInfo.nickname);
						uni.setStorageSync('phone', data.userInfo.phone);
						uni.reLaunch({
							url: backUrl
						});
					}
				})
				.catch((error) => {
					uni.showModal({
						title: self.$t(`提示`),
						content: self.$t(`错误信息`) + `${error}`,
						success: function (res) {
							if (res.confirm) {
								console.log(self.$t(`用户点击确定`));
							} else if (res.cancel) {
								console.log(self.$t(`用户点击取消`));
							}
						}
					});
				});
		},
		again() {
			this.codeUrl = VUE_APP_API_URL + '/sms_captcha?' + 'key=' + this.keyCode + Date.parse(new Date());
		},
		success(data) {
			this.$refs.verify.hide();
			getCodeApi()
				.then((res) => {
					this.keyCode = res.data.key;
					this.getCode(data);
				})
				.catch((res) => {
					this.$util.Tips({
						title: res
					});
				});
		},
		code() {
			let that = this;
			if (!that.protocol) {
				this.inAnimation = true;
				return that.$util.Tips({
					title: '请先阅读并同意协议'
				});
			}
			if (!that.account)
				return that.$util.Tips({
					title: that.$t(`请填写手机号码`)
				});
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
				return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
			this.$refs.verify.show();
		},
		async getLogoImage() {
			let that = this;
			getLogo(2).then((res) => {
				that.logoUrl = res.data.logo_url;
			});
		},
		async loginMobile() {
			let that = this;
			if (!that.protocol) {
				this.inAnimation = true;
				return that.$util.Tips({
					title: '请先阅读并同意协议'
				});
			}
			if (!that.account)
				return that.$util.Tips({
					title: that.$t(`请填写手机号码`)
				});
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
				return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
			if (!that.captcha)
				return that.$util.Tips({
					title: that.$t(`请填写验证码`)
				});
			if (!/^[\w\d]+$/i.test(that.captcha))
				return that.$util.Tips({
					title: that.$t(`请输入正确的验证码`)
				});
			if (that.appLoginStatus) {
				that.wxLoginApi();
			} else if (that.appleLoginStatus) {
				that.appleLoginApi();
			} else {
				if (this.keyLock) {
					this.keyLock = !this.keyLock;
				} else {
					return that.$util.Tips({
						title: that.$t(`请勿重复点击`)
					});
				}
				loginMobile({
					phone: that.account,
					captcha: that.captcha,
					spread: that.$Cache.get('spread')
				})
					.then((res) => {
						let data = res.data;
						that.$store.commit('LOGIN', {
							token: data.token,
							time: data.expires_time - this.$Cache.time()
						});
						console.log('登录成功，token:', data.token);
						uni.setStorageSync('token', data.token);
						let backUrl = '/pages/AI_try_on/home_page';
						that.$Cache.clear(BACK_URL);
						getUserInfo().then((res) => {
							this.keyLock = true;
							that.$store.commit('SETUID', res.data.uid);
							
							// 登录成功后打印用户信息
							console.log('===== 登录成功，用户信息 =====');
							console.log('uid:', res.data.uid);
							console.log('nickname:', res.data.nickname);
							console.log('phone:', res.data.phone);
							
							// 保存用户信息到本地存储，确保其他页面可以获取
							uni.setStorageSync('uid', res.data.uid);
							uni.setStorageSync('nickname', res.data.nickname);
							uni.setStorageSync('phone', res.data.phone);
							uni.reLaunch({
								url: backUrl
							});
						});
					})
					.catch((res) => {
						this.keyLock = true;
						that.$util.Tips({
							title: res
						});
					});
			}
		},
		async register() {
			let that = this;
			if (!that.protocol) {
				this.inAnimation = true;
				return that.$util.Tips({
					title: '请先阅读并同意协议'
				});
			}
			if (!that.account)
				return that.$util.Tips({
					title: that.$t(`请填写手机号码`)
				});
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
				return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
			if (!that.captcha)
				return that.$util.Tips({
					title: that.$t(`请填写验证码`)
				});
			if (!/^[\w\d]+$/i.test(that.captcha))
				return that.$util.Tips({
					title: that.$t(`请输入正确的验证码`)
				});
			if (!that.password)
				return that.$util.Tips({
					title: that.$t(`请填写密码`)
				});
			if (/^([0-9]|[a-z]|[A-Z]){0,6}$/i.test(that.password))
				return that.$util.Tips({
					title: that.$t(`您输入的密码过于简单`)
				});
			register({
				account: that.account,
				captcha: that.captcha,
				password: that.password,
				spread: that.$Cache.get('spread')
			})
				.then((res) => {
					that.$util.Tips({
						title: res
					});
					that.formItem = 1;
				})
				.catch((res) => {
					that.$util.Tips({
						title: res
					});
				});
		},
		async getCode(data) {
			let that = this;
			if (!that.protocol) {
				this.inAnimation = true;
				return that.$util.Tips({
					title: '请先阅读并同意协议'
				});
			}
			if (!that.account)
				return that.$util.Tips({
					title: that.$t(`请填写手机号码`)
				});
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
				return that.$util.Tips({
					title: that.$t(`请输入正确的手机号码`)
				});
			if (that.formItem == 2) that.type = 'register';

			await registerVerify({
				phone: that.account,
				type: that.type,
				key: that.keyCode,
				captchaType: this.captchaType,
				captchaVerification: data.captchaVerification
			})
				.then((res) => {
					this.sendCode();
					that.$util.Tips({
						title: res.msg
					});
				})
				.catch((res) => {
					that.$util.Tips({
						title: res
					});
				});
		},
		navTap: function (index) {
			this.current = index;
		},
		async submit() {
			let that = this;
			if (!that.protocol) {
				this.inAnimation = true;
				return that.$util.Tips({
					title: '请先阅读并同意协议'
				});
			}
			if (!that.account)
				return that.$util.Tips({
					title: that.$t(`请填写账号`)
				});
			if (!/^[\w\d]{5,16}$/i.test(that.account))
				return that.$util.Tips({
					title: that.$t(`请输入正确的账号`)
				});
			if (!that.password)
				return that.$util.Tips({
					title: that.$t(`请填写密码`)
				});
			if (this.keyLock) {
				this.keyLock = !this.keyLock;
			} else {
				return that.$util.Tips({
					title: that.$t(`请勿重复点击`)
				});
			}
			loginH5({
				account: that.account,
				password: that.password,
				spread: that.$Cache.get('spread')
			})
				.then(({ data }) => {
					that.$store.commit('LOGIN', {
						token: data.token,
						time: data.expires_time - this.$Cache.time()
					});
					console.log('登录成功，token:', data.token);
					uni.setStorageSync('token', data.token);
					let backUrl = '/pages/AI_try_on/home_page';
					that.$Cache.clear(BACK_URL);
					getUserInfo()
						.then((res) => {
							this.keyLock = true;
							that.$store.commit('SETUID', res.data.uid);
							
							// 登录成功后打印用户信息
							console.log('===== 登录成功，用户信息 =====');
							console.log('uid:', res.data.uid);
							console.log('nickname:', res.data.nickname);
							console.log('phone:', res.data.phone);
							
							// 保存用户信息到本地存储，确保其他页面可以获取
							uni.setStorageSync('uid', res.data.uid);
							uni.setStorageSync('nickname', res.data.nickname);
							uni.setStorageSync('phone', res.data.phone);
							uni.reLaunch({
								url: backUrl
							});
						})
						.catch((error) => {
							this.keyLock = true;
						});
				})
				.catch((e) => {
					this.keyLock = true;
					that.$util.Tips({
						title: e
					});
				});
		},
		showAgreement(type) {
			this.showAgreementPopup = true;
			if (type === 'user') {
				this.agreementTitle = this.$t('用户协议');
				this.agreementContent = `
					<div style="padding: 20px;">
						<h2 style="color: #e28181;">1. 协议的范围</h2>
						<p style="margin: 15px 0;">欢迎您使用我们的服务。本协议是您与我们之间关于使用本平台服务所订立的协议。</p>
						
						<h2 style="color: #e28181;">2. 服务内容</h2>
						<p style="margin: 15px 0;">我们将按照本协议的规定，为您提供信息服务、交易服务等网络服务。</p>
						
						<h2 style="color: #e28181;">3. 用户权利和义务</h2>
						<p style="margin: 15px 0;">3.1 您有权按照本协议约定使用本平台提供的各项服务。</p>
						<p style="margin: 15px 0;">3.2 您在使用本服务时必须遵守中华人民共和国相关法律法规。</p>
						
						<h2 style="color: #e28181;">4. 隐私保护</h2>
						<p style="margin: 15px 0;">我们非常重视您的隐私保护，具体隐私保护规则请参见《隐私协议》。</p>
						
						<h2 style="color: #e28181;">5. 免责声明</h2>
						<p style="margin: 15px 0;">在法律允许的范围内，我们对本服务不提供任何明示或暗示的保证。</p>
					</div>
				`;
			} else {
				this.agreementTitle = this.$t('隐私协议');
				this.agreementContent = `
					<div style="padding: 20px;">
						<h2 style="color: #e28181;">1. 信息收集</h2>
						<p style="margin: 15px 0;">我们收集的信息包括但不限于：您的个人身份信息、联系方式、设备信息等。</p>
						
						<h2 style="color: #e28181;">2. 信息使用</h2>
						<p style="margin: 15px 0;">我们收集的信息将用于：提供服务、改善用户体验、保障账户安全等目的。</p>
						
						<h2 style="color: #e28181;">3. 信息保护</h2>
						<p style="margin: 15px 0;">我们采用业界标准的安全技术和程序来保护您的个人信息不被未经授权的访问、使用或泄露。</p>
						
						<h2 style="color: #e28181;">4. 信息共享</h2>
						<p style="margin: 15px 0;">除非获得您的明确同意或法律法规要求，我们不会与第三方分享您的个人信息。</p>
						
						<h2 style="color: #e28181;">5. Cookie的使用</h2>
						<p style="margin: 15px 0;">我们使用Cookie和类似技术来提供更好的服务体验和个性化内容。</p>
					</div>
				`;
			}
		},
		closeAgreement() {
			this.showAgreementPopup = false;
		},
		togglePasswordVisibility() {
			this.showPassword = !this.showPassword;
		},
	}
};
</script>
<style>
/* 设置页面背景色为白色 */
page {
	background: #ffffff;
}
</style>
<style lang="scss">
/* App 登录区域样式 */
.appLogin {
	margin-top: 70rpx;

	/* 水平分割线与文字 */
	.hds {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #be5959;
		font-size: 24rpx;

		.line {
			width: 80rpx;
			height: 1px;
			background: rgba(235, 112, 112, 0.1);
		}

		p {
			padding: 0 15rpx;
		}
	}

	/* 第三方登录按钮区域 */
	.btn-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;

		/* 登录按钮通用样式 */
		.btn,
		.apple-btn {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin-right: 30rpx;
			color: #ffffff;
			font-size: 36rpx;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		}

		/* 微信登录按钮 */
		.wx {
			background-color: #2aae67;
		}

		/* 密码登录按钮 */
		.mima {
			margin-right: 30rpx;
			background-color: #28b3e9;
		}

		/* 验证码登录按钮 */
		.yanzheng {
			margin-right: 30rpx;
			background-color: #f89c23;
		}
	}
}

/* 验证码图片样式 */
.code img {
	width: 100%;
	height: 100%;
}

/* 输入框行样式 */
.acea-row.row-middle {
	display: flex;
	align-items: center;
	padding: 16rpx 45rpx;
	
	image {
		width: 24rpx;  /* 保持图标原有尺寸 */
		height: 34rpx;
		flex-shrink: 0;
		vertical-align: middle;
	}
	
	input {
		margin-left: 20rpx;
		display: block;
		flex: 1;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #333333;
		background-color: transparent;
	}
}

/* 登录页面整体容器 */
.login-wrapper {
	padding: 30rpx;
	min-height: 100vh;
	background-color: #ffffff;
	color: #333333;

	/* Logo区域 */
	.shading {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 150rpx;

		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	/* 登录表单白色背景区域 */
	.whiteBg {
		margin-top: 80rpx;

		/* 输入框列表 */
		.list {
			border-radius: 16rpx;
			overflow: hidden;
			background-color: #ffffff;
			box-shadow: 0 8rpx 20rpx rgba(226, 129, 129, 0.15);
			border: 1px solid rgba(226, 129, 129, 0.1);

			/* 每个输入项 */
			.item {
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);

				.row-middle {
					position: relative;
					padding: 16rpx 45rpx;

					/* 输入框样式 */
					input {
						flex: 1;
						font-size: 28rpx;
						height: 80rpx;
						color: #333333;
						background-color: transparent;
					}

					/* 输入框占位符颜色 */
					input::placeholder {
						color: #999999;
					}

					/* 验证码按钮 */
					.code {
						position: absolute;
						right: 15rpx;
						top: 50%;
						color: #ffffff;
						font-size: 26rpx;
						transform: translateY(-50%);
						background-color: #e28181;
						border-radius: 40rpx;
						padding: 10rpx 20rpx;
						box-shadow: 0 4rpx 8rpx rgba(226, 129, 129, 0.2);
						border: 1px solid rgba(226, 129, 129, 0.1);
						
						/* 禁用状态 */
						&.on {
							background-color: #cccccc;
							color: #ffffff;
						}
					}

					.password-eye {
						position: absolute;
						right: 45rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 40rpx;
						color: #999;
						z-index: 10;
						
						&:active {
							opacity: 0.7;
						}
					}
				}
			}
		}

		/* 登录按钮 */
		.logon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 86rpx;
			margin-top: 80rpx;
			background-color: #e28181;
			border-radius: 43rpx;
			color: #ffffff;
			font-size: 32rpx;
			font-weight: 500;
			letter-spacing: 2rpx;
			box-shadow: 0 8rpx 20rpx rgba(226, 129, 129, 0.3);
			border: 1px solid rgba(226, 129, 129, 0.1);
			position: relative;
			overflow: hidden;
			
			/* 光效覆盖层 */
			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
			}

			/* 按下效果 */
			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 4rpx 10rpx rgba(226, 129, 129, 0.3);
			}
		}

		/* 登录方式切换提示 */
		.tips {
			margin: 30rpx;
			text-align: center;
			color: #999999;
			font-size: 26rpx;
			
			view {
				display: inline-block;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
				background-color: rgba(226, 129, 129, 0.05);
				border: 1px solid rgba(226, 129, 129, 0.1);
				transition: all 0.3s;

				/* 按下效果 */
				&:active {
					background-color: rgba(226, 129, 129, 0.1);
				}
			}
		}
	}
}

/* 用户协议区域 */
.protocol {
	margin-top: 40rpx;
	color: #999999;
	font-size: 24rpx;
	text-align: center;
	bottom: 20rpx;
	
	/* 复选框缩放 */
	checkbox {
		transform: scale(0.8);
		margin-right: 10rpx;
	}
	
	/* 添加自定义复选框样式 */
	::v-deep uni-checkbox .uni-checkbox-input {
		border-color: #e28181 !important;
		background-color: transparent !important;
	}
	
	/* 复选框选中状态样式 */
	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background-color: #e28181 !important;
		border-color: #e28181 !important;
	}
	
	/* 复选框选中状态勾选图标 */
	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
		color: #e95151 !important;
	}
}

/* 在H5环境下，当宽高比大于13:20时隐藏底部 */
/* #ifdef H5 */
@media (min-aspect-ratio: 13/20) {
	.bottom {
		display: none !important;
	}
}
/* #endif */

/* 底部版权信息样式 - 已删除底部版权内容，保留样式供参考 */
.bottom {
	display: none; /* 隐藏底部版权信息 */
}

/* 复选框抖动动画 */
@keyframes shake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-5px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(5px);
	}
}

/* 抖动效果类 */
.trembling {
	animation: shake 0.6s;
}

/* 主色调文本颜色 */
.main-color {
	color: #e28181;
	font-weight: 500;
}

/* 全局自定义复选框样式（微信小程序环境） */
page checkbox .wx-checkbox-input {
	border-radius: 50%;
	width: 38rpx;
	height: 38rpx;
	border-color: #e28181;
}

/* 复选框选中状态 */
page checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	background-color: #e28181;
	border-color: #e28181;
}

/* 复选框选中状态下的勾选图标 */
page checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
	color: #ff0000;
	font-weight: bold;
	font-size: 32rpx;
	line-height: 32rpx;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
	transform: translate(-50%, -50%) scale(1.2);
}

/* uni-app 自定义复选框修复 */
::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
	color: #ffffff !important;
	font-weight: bold !important;
	font-size: 28rpx !important;
	line-height: 28rpx !important;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.3) !important;
	transform: translate(-50%, -50%) scale(1.2) !important;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	background-color: rgba(226, 129, 129, 0.3);
	border-radius: 3px;
}

/* 验证码按钮包装器 */
.code-area {
	position: absolute;
	right: 15rpx;
	top: 50%;
	transform: translateY(-50%);
	height: 60rpx;
	display: flex;
	align-items: center;
	padding: 0; /* 确保没有内边距影响点击区域 */
	z-index: 10; /* 确保在其他元素之上 */
}

/* 验证码按钮 */
.code {
	color: #ffffff;
	font-size: 26rpx;
	background-color: #e28181;
	border-radius: 40rpx;
	padding: 10rpx 20rpx;
	box-shadow: 0 4rpx 8rpx rgba(226, 129, 129, 0.2);
	border: 1px solid rgba(226, 129, 129, 0.1);
	margin: 0; /* 确保没有外边距影响点击区域 */
	line-height: normal; /* 防止行高影响按钮高度 */
	height: 100%; /* 确保按钮填满父容器高度 */
	min-width: 140rpx; /* 提供最小宽度 */
	
	/* 禁用状态 */
	&.on {
		background-color: #cccccc;
		color: #ffffff;
	}
}

/* 协议弹窗样式 */
.agreement-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.agreement-content {
		width: 90%;
		max-width: 600rpx;
		height: 80vh;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		
		.agreement-header {
			padding: 30rpx;
			text-align: center;
			position: relative;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			
			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
			}
			
			.close {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 40rpx;
				color: #999;
				padding: 10rpx;
			}
		}
		
		.agreement-body {
			flex: 1;
			padding: 0 30rpx;
			overflow-y: auto;
			
			/* 设置滚动条样式 */
			&::-webkit-scrollbar {
				width: 6rpx;
				background-color: transparent;
			}
			
			&::-webkit-scrollbar-thumb {
				background-color: rgba(226, 129, 129, 0.3);
				border-radius: 3rpx;
			}
		}
	}
}

input[type="password"] {
    -webkit-text-security: disc !important;
}
</style>
